<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="page-content">

	<div class="row">
		<div class="col-xs-12">
		
			<div class="row">
				<div class="col-xs-12">
					<p class="btn-group">
						<button id="add-bto" class="btn btn-primary btn-sm">
							<i class="glyphicon glyphicon-plus"></i>添加
						</button>
						<button id="edit-bto" class="btn btn-info btn-sm">
							<i class="ace-icon fa fa-pencil-square-o"></i>编辑
						</button>
						<button id="del-bto" class="btn btn-danger btn-sm">
							<i class="ace-icon fa fa-trash"></i>删除
						</button>
						<button id="search-bto" class="btn btn-purple btn-sm">
							<i class="ace-icon fa fa-search"></i>搜索
						</button>
						<button id="reload-bto" class="btn btn-success btn-sm">
							<i class="ace-icon fa fa-refresh"></i>刷新
						</button>
					</p>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<table id="dataTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th class="center">
									<label class="position-relative">
										<input type="checkbox" class="ace" />
										<span class="lbl"></span>
									</label>
								</th>
								<th>编号</th>
								<th>用户名</th>
								<th>密码</th>
								<th>密码种子</th>
								<th>手机号码</th>
								<th>邮箱地址</th>
								<th>状态</th>
								<th>日期</th>
								<th></th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			
		</div>
	</div>
	
</div>

<%@include file="/WEB-INF/jsp/common/dataTable-js.jspf"%>
<script type="text/javascript">
	$(function(){
		var t = $("#dataTable").DataTable({
			"bProcessing": true,
			"bServerSide": true,
			"sPaginationType" : "full_numbers",
			"sServerMethod": "POST",
			"sAjaxSource": "${ctx}/admin/sys/user/datagrid",
			"searching": false,
			"aoColumns": [
				{"mData": null, "defaultContent": "", "bSortable": false},        
				{"mData": "id"},
				{"mData": "username", "sDefaultContent": ""}, 
				{"mData": "password"},
				{"mData": "salt"},
				{"mData": "mobile"},
				{"mData": "email"},
				{"mData": "status"},
				{"mData": "createDate"},
				{"mData": null, "defaultContent": "", "bSortable": false}
			],
			"columnDefs" : [ {
               	"targets" : 0,
           	 	"sClass": "center",
                "render" : function(data, type, row) {
               	 return '<label class="position-relative">'+
	                	'<input type="checkbox" class="ace" />'+
	                	'<span class="lbl"></span>'+
	                	'</label>';
                }
            },{
                "targets" : 9,
                "render" : function(data, type, row) {
               	 return '<div class="hidden-sm hidden-xs action-buttons">'+
	                	'<a class="blue" href="#"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>'+
	                	'<a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130"></i></a>'+
	                	'<a class="red" href="#"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>'+
	                	'</div>';
                }
            }],
	        "order": [[1, 'asc']],
	        "language": {
	            "url": "${ctx}/static/plugins/other/dataTable-language.json"
	        },
			"sDom": '<"bottom"i>rt<"bottom"flp><"clear">'
		});
		
		t.on("click", "th input:checkbox" , function(){
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
			.each(function(){
				this.checked = that.checked;
				$(this).closest('tr').toggleClass('selected');
			});
		});
	});
</script>
